<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		
		<view class="top" v-if="loginPage===1">
			<view class="avater">
				<image src="/static/images/login-icon.png"></image>
			</view>
			<view class="tips">
				<view class="title">申请获取以下权限</view>
				<view class="text">获得你的公开信息（昵称、头像等）</view>
			</view>
			
			<view class="but">
				<!-- #ifdef MP-WEIXIN -->
				<button class="my-but-primary" @click="authLogin">授权登录</button>
				<!-- #endif -->
				
				<!-- #ifdef MP-ALIPAY -->
				<button class="my-but-primary" open-type="getAuthorize" scope="userInfo" @getAuthorize="authLogin">授权登录</button>
				<!-- #endif -->
				<button class="nologin-but" @click="$c.a('index','',2)">暂不登录</button>
			</view>
		</view>
		
		<view class="mobile-box" v-if="loginPage===2">
			<view class="text">请先绑定手机号码</view>
			<view class="input1">
				<input class="phone-input" placeholder="请输入手机号码" type="number" v-model="phoneNumber"/>
			</view>
			<view class="input2">
				<input class="yzm-input" placeholder="输入验证码" type="number" v-model="yzmCode">
				<u-code
					ref="uCode"
					@change="codeChange"
					@end="codeEnd"
					@start="codeStart"
					seconds="60"
					changeText="X秒重新获取"
				></u-code>
				<button	class="yzm-but"	@click="getCode">{{yzmText}}</button>
			</view>
			<view class="but">
				<button class="my-but-primary" @click="bindMobile">绑定手机号</button>
				<button class="nologin-but" @click="$c.a('index','',2)">暂不登录</button>
			</view>
		</view>
		
		<view class="weixin-info" v-if="loginPage===3">
			<button class="wx-avatar" open-type="chooseAvatar" @chooseavatar="wxChooseAvatar">
			  <image class="avater" mode="widthFix" :src="avatarUrl"></image>
			</button>
			<view class="wx-nickname">
				<input type="nickname" class="nickname-input" placeholder="请输入昵称" @blur="setNickName"/>
			</view>
			<view class="tips">
				<view class="title">完善您的头像和昵称</view>
				<view class="text">点击头像图标可选用微信头像</view>
				<view class="text">点击昵称输入框，可选择微信昵称</view>
			</view>
			<view class="but">
				<button class="my-but-primary" @click="saveUserAvatarNick">保存信息</button>
				<button class="nologin-but" @click="loginOkBack()">跳过，直接登录</button>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup ref="privacyComponent" position="center" ></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { rsaEncrypt,rsaDecrypt } from '@/common/jsencrypt.js'
	import $file from "@/common/file"
	import $user from '@/common/user.js'
	export default {
		data() {
			return {
				nav_title:'授权登录',
				backUrl:'',
				loginPage:1,			// 1=授权登录    2=手机绑定    3=头像昵称
				yzmText:'获取验证码',
				phoneNumber:'',
				yzmCode:'',
				yzmStatus:false,
				memberID:'',
				defaultAvatar:'/static/images/select-avatar.png',
				avatarUrl:'',
				nickName:'',
			}
		},
		onLoad(option){
			this.getParams=option;
			this.initData();
			this.$c.getConfig().then(res=>{
				this.$u.mpShare = res.share;
			});
			this.$refs.newcoupon.open();
		},
		onShow(){
		},
		computed:{
			...mapState({}),
		},
		methods: {
			...mapMutations(['login']),
			codeChange(text) {
				this.yzmText = text;
			},
			//开始验证码
			codeStart(){
				
			},
			//验证码结束
			codeEnd(){
				
			},
			phoneChange(e){
				this.phoneNumber=e
			},
			//点击验证码
			getCode() {
				if(!uni.$u.test.mobile(this.phoneNumber)){
					uni.$u.toast('手机号码格式不正确！');
				}else{
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$u.api.userSms({
							phone:rsaEncrypt(this.phoneNumber),
						}).then(res=>{
							uni.hideLoading();
							if(res.status){
								//开启验证码状态
								this.yzmStatus=true
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}else{
								uni.$u.toast(res.mgs);
							}
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			initData(){
				this.avatarUrl=this.defaultAvatar
				//隐藏底部导航
				//wx.hideTabBar();
				if(this.islogin == true){
					this.$c.toBack(-1,false);
				}
			},
			
			//授权微信用户信息
			authLogin(){
				let that=this;
				uni.getProvider({
				    service: 'oauth',
				    success: function (res) {
						console.log(res)
				        $user.login(res.provider[0]).then(res=>{
							//self.loginOK(res,false)
				        	that.loginSet(res);
				        })
				    }
				});
			},
			
			//登陆后判断是否绑定手机或者完善信息
			loginSet(res){
				if(res.type===0){
					this.loginOK(res)
				}else if(res.type===2){			//未登录成功，需要绑定手机
					if(res.member_id!=null && res.member_id!=undefined){
						this.memberID=res.member_id
						this.loginPage=2
					}else{
						uni.$u.toast('用户创建失败！');
					}
				}else if(res.type===3){			//已经登录，完善信息,先不跳转
					this.loginOK(res,false)
					this.loginPage=3
				}
			},
			
			//获取微信头像
			wxChooseAvatar(e){
				this.avatarUrl = e.detail.avatarUrl
			},
			
			//设置昵称数据
			setNickName(e){
				this.nickName=e.detail.value
			},
			
			// 保存昵称头像
			saveUserAvatarNick(){
				if(this.avatarUrl===this.defaultAvatar){
					uni.$u.toast('请先选择头像')
					return false
				}
				
				if(this.nickName===""){
					uni.$u.toast('请输入用户昵称')
					return false
				}
				$file.uploadImg(this.avatarUrl).then(avatar_res=>{
					this.$u.api.userUp({nickname:this.nickName,avatar:avatar_res.data.url}).then(res=>{
						this.$store.state.$userInfo.avatar=avatar_res.data.url
						this.$store.state.$userInfo.nickname=this.nickName
						this.loginOkBack()		//修改成功跳转
					})
				})
			},
			
			//绑定手机号码
			bindMobile(e){
				if(!this.yzmStatus){
					uni.$u.toast('请先获取验证码');
					return false
				}
				if(this.yzmCode==""){
					uni.$u.toast('请输入验证码');
					return false
				}
				let data={
					mobile:this.phoneNumber,
					code:this.yzmCode,
					member_id:this.memberID
				}
				this.$u.api.smsLogin(data).then(res=>{
					if(res.data.type===0){			//登录并跳转
						this.loginOK(res.data)
					}else if(res.data.type===3){	//已经登录，完善信息,先不跳转
						this.loginOK(res.data,false)
						this.loginPage=3
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},
			//登录成功后的处理
			loginOK(data,jump=true){
				if(data.token!=null && data.member){
					this.login(data)
					//更新分享连接
					this.$c.getShare(1)
					if(jump) this.loginOkBack()
				}else{
					uni.$u.toast('登录异常')
				}
			},
			//登录成功跳转
			loginOkBack(){
				uni.$u.toast('登录成功')
				this.$c.toBack(-1,true)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.u-input{
		padding: 20rpx;
	}
	.top{
		padding: 80rpx;
	}
	.tips{
		margin: 10px auto;
		text-align: left;
		border-top: 1px solid $u-border-color;
		padding-top: 20px;
	}
	.tips view{
		padding: 10px;
	}
	.tips .title{
		font-size: 16px;
	}
	.tips .text{
		font-size: 14px;
		color: #B2B2B2;
	}
	.avater{
		text-align: center;
		margin: 50px auto 40px auto;
	}
	.avater image{
		width: 120px;
		height: 120px;
	}
	.but{
		margin: 10px auto;
	}
	.but button{
		margin-top: 30rpx;
	}
	
	.mobile-box{
		margin: 50rpx 80rpx;
		margin-top: 150rpx;
	}
	.mobile-box .text{
		margin-bottom: 40rpx;
	}
	.mobile-box .input1,.mobile-box .input2{
		margin-bottom: 40rpx;
		width: 100%;
		border-bottom: 1rpx solid $u-border-color;
	}
	.mobile-box .input2{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.mobile-box .but{
		margin-top: 80rpx;
	}
	.mobile-box .but button{
		margin-top: 40rpx;
	}
	
	.nologin-but{
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		background-color: #909399;
	    border-radius: 50rpx 50rpx 50rpx 50rpx;
	}
	.yzm-but{
		font-size: 12px;
		color: #FFFFFF;
		line-height: 60rpx;
		height: 60rpx;
		padding: 0rpx 20rpx;
		background-color: var(--view-theme);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		width: 220rpx;
	}
	
	.yzm-input{
		font-size: 16px;
		padding: 8px 10px;
	}
	
	.phone-input{
		font-size: 16px;
		padding: 8px 10px;
	}
	.weixin-info{
		padding: 80rpx;
		.tips{
			border: 0rpx;
		}
		.wx-avatar{
			padding: 0rpx;
		}
		.wx-avatar,.wx-avatar image{
			border: 0rpx;
			margin: 0rpx auto;
			width: 250rpx;
			height: 250rpx;
		}
		.wx-nickname{
			margin-top: 30rpx;
			.nickname-input{
				text-align: center;
				border: 1rpx solid $u-border-color;
				padding: 15rpx;
				border-radius: 20rpx;
			}
		}

	}
</style>